<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="FuncionesUtilitarias.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<h1 class="title">Gestión de Informes de Novedades</h1>
<hr>
<p class="meta"></p>
<script type="text/javascript">
    function basicosDone(){
        hideElementByDisplay('error_select_ng');
        hideElementByDisplay('error_select_ne');
        hideElementByDisplay('error_fecha_vacia');
        hideElementByDisplay('error_oficial');
        hideElementByDisplay('error_via');
        hideElementByDisplay('error_via_alterna');
        var hayError = false;
        var dropGen = document.getElementById('novGenSelected');
        var dropEsp = document.getElementById('novEspSelected');
        var fecha = document.getElementById('fechaControl');
        var dropWorker = document.getElementById('workerSelected');
        var via = document.getElementById('viaSelected');
        
        if(dropGen.value == "seleccionar"){
            showElementByDisplay('error_select_ng');
            hayError = true;
        }
        if(dropEsp.value == "seleccionar"){
            showElementByDisplay('error_select_ne');
            hayError = true;
        }
        if(fecha.value == null || fecha.value == ""){
            showElementByDisplay('error_fecha_vacia');
            hayError = true;
        }
        if(dropWorker.value == "seleccionar"){
            showElementByDisplay('error_oficial');
            hayError = true;
        }
        if(via.value == "seleccionar" || via.value ==""){
            showElementByDisplay('error_via');
            hayError = true;
        }
        if(via.value == "Otra" && !document.getElementById('via_alterna_value').value.match(/^[a-zA-ZáéíóúÁÉÍÓÚ][a-zA-ZáéíóúÁÉÍÓÚ ]*$/)){
            showElementByDisplay('error_via_alterna');
            hayError = true;
        }        
        
        if(!hayError){
            toUbicacion();
        }
    }

    function toBasicos(){
        showElementByDisplay('infoGeneralTable');
        showElementByDisplay('sub1');
        hideElementByDisplay('sub2');
        hideElementByDisplay('sub4');
        hideElementByDisplay('sub3');
        hideElementByDisplay('addReporte');
        showElementByDisplay('nextButton');
        hideElementByDisplay('addReporte');
        hideElementByDisplay('fieldsTable');
        hideElementByDisplay('peopleTable');
        hideElementByDisplay('ubicacionTable');
        hideElementByDisplay('pisosTable');
        hideElementByDisplay('pisosSub');
        setNextButtonOnClick('basicosDone','');
        setBackButtonOnClick('novedadesInforme','');
    }

    function toUbicacion(){
        hideElementByDisplay('infoGeneralTable');
        hideElementByDisplay('sub1');
        hideElementByDisplay('sub4');
        hideElementByDisplay('sub3');
        hideElementByDisplay('addReporte');
        showElementByDisplay('nextButton');
        hideElementByDisplay('addReporte');
        hideElementByDisplay('fieldsTable');
        hideElementByDisplay('peopleTable');
        showElementByDisplay('sub2');
        showElementByDisplay('ubicacionTable');
        showElementByDisplay('pisosTable');
        setBackButtonOnClick('toBasicos','');
        setNextButtonOnClick('ubicacionDone','');
        if(count > 0){
            showElementByDisplay('pisosSub');
        }
    }

    var count = 0;
    function checkEspacio(valor, val){
        $.getJSON("listarPisos.do",{nombre: valor, sede:val},
        function(data) {
            document.getElementById('pisosTable').innerHTML = "";
            hideElementByDisplay('pisosSub');
            var row = "<tr id='pisosRow'></tr>";
            count = 0;
            $('#pisosTable').append(row);
            $.each(data.pisos, function(i,item){
                row = "<tr><td><input type='checkbox' name='pisos[]' value='"+item.id_piso+"'/>"+item.id_piso+"</td></tr>";
                $('#pisosTable').append(row);
                count++;
            });
            if(count > 0){
                showElementByDisplay('pisosSub');
            }
        });
        
    }

    function ubicacionDone(){
        if(document.getElementById('espacioSelected').value == "seleccionar"){
            showElementByDisplay("error_ubicacion");
        }else{
            hideElementByDisplay("error_ubicacion");
            toPeople();
        }
    }

    /*
     * Agrega un nuevo campo a la planilla a crear.
     */
    var counter = 1;
    function nuevoCampo(){
        counter = counter + 1;
        var row = "<tr id='tr"+counter+"'><td><input type='text' id='n"+counter+"' name='names[]' size='12'/></td>" +
            "<td><input type='text' id='a"+counter+"' name='lNames[]' size='12'/></td>" +
            "<td nowrap='true'><select name='nacs[]'>"+
            "<option value='V'>V</option>"+
            "<option value='E'>E</option></select>-<input type='text' id='c"+counter+"' name='cedulas[]' size='10'/>"+
            "<td><input type='text' id='t"+counter+"' name='telefonos[]' size='12'/></td>"+
            "<td><input type='text' id='mail"+counter+"' name='emails[]' size='12'/></td>"+
            "<td><select id='tipo"+counter+"' name='tipos[]'>"+
            "<option value='Academico'>Académico</option>"+
            "<option value='Estudiante'>Estudiante</option>"+
            "<option value='Externo'>Externo</option>"+
            "<option value='Obrero'>Obrero</option></select></td>"+
            "<td nowrap='true'><table>"+
            "<tr><td>Denunciante</td><td><input type='checkbox' id='dens"+counter+"' value='"+counter+"'></td>"+
            "<td><input type='text' id='dens_val_"+counter+"' style='display:none' name='dens[]' value='false'></td></tr>"+
            "<tr><td>Agraviado</td><td><input type='checkbox' id='agr"+counter+"' value='"+counter+"'></td>"+
            "<td><input type='text' id='agr_val_"+counter+"' style='display:none' name='agr[]' value='false'></td></tr>"+
            "<tr><td>Indiciado</td><td><input type='checkbox' id='ind"+counter+"' value='"+counter+"'></td>"+
            "<td><input type='text' id='ind_val_"+counter+"' style='display:none' name='ind[]' value='false'></td></tr>"+
            "<tr><td>Testigo</td><td><input type='checkbox' id='test"+counter+"' value='"+counter+"'></td>"+
            "<td><input type='text' id='test_val_"+counter+"' style='display:none' name='test[]' value='false'></td></tr></table>"+
            "<td id='td"+counter+"'><input type='button' name='addFieldButton' id='addFieldButton"+counter+"' value='+' onclick='nuevoCampo();'/>"+
            "<input type='button' name='removeFieldButton' id='removeFieldButton"+counter+"' value='-' onclick='removerCampo("+counter+");'/></td></tr>";
        $("#peopleTable").append(row);
    }
    
    function removerCampo(id){
        if(id>1){
            var tr = "#tr"+id;
            $(tr).remove();   
        }
    }


    var metodo_validar = new Array();
    var nombre_campos = new Array();
    var count = 0;
    //private String[] obligatorio_campo; 
    
    function showCamposDinamicos(generica,especifica){
        $.getJSON("muestraCampos.do",{gen: generica, esp: especifica},
        function(data){
            document.getElementById('fieldsTable').innerHTML = "";
            count = 0;
            $.each(data.fields, function(i,item){
                var row = item.nombre_campo+"</td><td>"+
                    "<input type='text' id='ca"+count+"' "+
                    "name='valor_campo[]' size='30' maxlength='"+item.longitud+"' /></td>"+
                    "<td><input style='display:none' type='text'"+
                    " name='nombre_campo[]' id='lon"+count+"' value='"+item.longitud+"' ></td>"+
                    "<td><input style='display:none' type='text'"+
                    " name='nombre_campo[]' id='nc"+count+"' value='"+item.nombre_campo+"' ></td>"+
                    "<td><input style='display:none' type='text'"+
                    " name='id_campos[]' id='id"+count+"' value='"+count+"' ></td>"+
                    "<td><input style='display:none' type='text'"+
                    " name='validacion_campo[]' id='vc"+count+"' value='"+item.validacion_campo+"' ></td>"+
                    "<td><input style='display:none' type='text'"+
                    " name='obligatorio_campo[]' id='oc"+count+"' value='"+item.obligatorio_campo+"' ></td>"+
                    "</tr>";
                if(item.obligatorio_campo == true){
                    row = "<font color='red'>*&nbsp;</font>"+row;
                }
                row = "<tr><td>"+row;
                $('#fieldsTable').append(row);
                count++;
            });
            //count--;
        });
    }

    function toPeople(){
        hideElementByDisplay('sub2');
        hideElementByDisplay('ubicacionTable');
        hideElementByDisplay('pisosTable');
        hideElementByDisplay('pisosSub');
        showElementByDisplay('sub4');
        showElementByDisplay('peopleTable')
        hideElementByDisplay('descripcionTable');
        setNextButtonOnClick('validarPeople','');
        setBackButtonOnClick('toUbicacion','');
        hideElementByDisplay('error_descripcion');
        showElementByDisplay('nextButton');
        hideElementByDisplay('addReporte');
        hideElementByDisplay('fieldsTable');
        hideElementByDisplay('error_campos_vacios');
        hideElementByDisplay('error_fieldsTable');
        hideElementByDisplay('sub3');
    }

    function validarPeople(){
        var hayError = false;
        var letras = /^[a-zA-ZáéíóúÁÉÍÓÚ][a-zA-ZáéíóúÁÉÍÓÚ ]*$/;
        var numeros = /^[0-9]{7,15}$/;
        var cedula_match = /^[0-9]+$/;
        hideElementByDisplay('error_nombre_inv');
        hideElementByDisplay('error_apellido_inv');
        hideElementByDisplay('error_cedula_inv');
        hideElementByDisplay('error_telefono_inv');
        hideElementByDisplay('error_campos_vacios');
        hideElementByDisplay('error_fieldsTable');
        $("#error_fieldsTable").empty();
        var campos = 0;
        var nombre = "";
        var apellido = "";
        var cedula = "";
        for(var i = 1; i <= counter; i++){
            
            if(document.getElementById('tr'+i) != null){
                nombre = document.getElementById('n'+i).value;
                apellido = document.getElementById('a'+i).value;
                cedula = document.getElementById('c'+i).value;
                if (nombre.length > 0){
                    campos++;
                    if(nombre.length > 0 && !(nombre.match(letras))){
                        showElementByDisplay('error_nombre_inv');
                        hayError = true;
                    }
                }
                if (apellido.length > 0){
                    campos++;
                    if(apellido.length > 0 && !(apellido.match(letras))){
                        showElementByDisplay('error_apellido_inv');
                        hayError = true;
                    }
                }
                if (cedula.length > 0){
                    campos++;
                    if(cedula.length > 0 && !(cedula.match(cedula_match))){
                        showElementByDisplay('error_cedula_inv');
                        hayError = true;
                    }
                }
                if (campos > 0 && campos < 3){
                    showElementByDisplay('error_campos_vacios');
                    hayError = true;
                }
                var telefono = document.getElementById('t'+i).value;
                if(telefono.length > 0 && !(telefono.match(numeros))){
                    showElementByDisplay('error_telefono_inv');
                    hayError = true;
                }
                if(document.getElementById('dens'+i).checked){
                    document.getElementById('dens_val_'+i).value = "true";
                }
                if(document.getElementById('agr'+i).checked){
                    document.getElementById('agr_val_'+i).value = "true";
                }
                if(document.getElementById('ind'+i).checked){
                    document.getElementById('ind_val_'+i).value = "true";
                }
                if(document.getElementById('test'+i).checked){
                    document.getElementById('test_val_'+i).value = "true";
                }
            }
            campos = 0;
        }
        if(!hayError){
            toCampos();
        }
    }

    function toCampos(){
        hideElementByDisplay('sub4');
        hideElementByDisplay('peopleTable');
        showElementByDisplay('sub3');
        showElementByDisplay('addReporte');
        hideElementByDisplay('nextButton');
        showElementByDisplay('fieldsTable');
        setBackButtonOnClick('toPeople','');
        var gen = document.getElementById('novGenSelected').value;
        var esp = document.getElementById('novEspSelected').value;
        showCamposDinamicos(gen, esp);
        showElementByDisplay('descripcionTable');
    }

    function validarCamposDesc(){
        hideElementByDisplay('error_fieldsTable');
        hideElementByDisplay('error_descripcion');
        $("#error_fieldsTable").empty();
        var hayError = false;
        var letras = /^[a-zA-ZáéíóúÁÉÍÓÚ][a-zA-ZáéíóúÁÉÍÓÚ ]*$/;
        var numeros = /^[0-9]+$/;
        var fecha = /^(0[1-9]|[0,1,2][0-9]|3[0,1])\/(0[1-9]|1[0,1,2])\/\d{4}$/;
        var row = "";
        var id_campo = "";
        for(var i = 0; i <count; i++){
            id_campo="ca"+i ;       
            var campo = document.getElementById(id_campo).value;
            if(campo=="" && document.getElementById('oc'+i).value == "true"){
                row = "<tr><td><li id='error_campo_"+i+"'><font color='red' ><p>El campo "+document.getElementById('nc'+i).value+" es obligatorio.</p></font></li></td></tr>";
                $('#error_fieldsTable').append(row);
                hayError = true;
            }
             
            if(campo.length > 0){
                if(document.getElementById('vc'+i).value == "0"){
                    if(!campo.match(numeros) && campo.length > document.getElementById('lon'+i).value){
                        row = "<tr><td><li id='error_campo_"+i+"'><font color='red' ><p>El campo "+document.getElementById('nc'+i).value+" debe ser un número de máximo "+document.getElementById('lon'+i).value+" dígitos.</p></font></li></td></tr>";
                        $('#error_fieldsTable').append(row);
                        hayError = true;
                    }
                     
                }else if(document.getElementById('vc'+i).value == "1"){
                    if(!campo.match(letras) && campo.length > document.getElementById('lon'+i).value){
                        row = "<tr><td><li id='error_campo_"+i+"'><font color='red' ><p>El campo "+document.getElementById('nc'+i).value+" es un campo de caracteres alfabéticos de máximo "+document.getElementById('lon'+i).value+" caracteres.</p></font></li></td></tr>";
                        $('#error_fieldsTable').append(row);
                        hayError = true;
                    }
                     
                }else if(document.getElementById('vc'+i).value == "2"){
                    if(!fecha.test(campo)){
                        row = "<tr><td><li id='error_campo_"+i+"'><font color='red' ><p>El campo "+document.getElementById('nc'+i).value+" es un campo de fecha y debe tener el formato DD/MM/AAAA</p></font></li></td></tr>";
                        $('#error_fieldsTable').append(row);
                        hayError = true;
                    }
                     
                }
            }
        }
        
        if (hayError){
            showElementByDisplay('error_fieldsTable');
        }
        
        var desc = document.getElementById('descripcion').value
        if(desc.length == 0){
            showElementByDisplay('error_descripcion');
            hayError = true;
        }
        if(!hayError){
            sendForm('AgregarReporteForm', 'AgregarReporte','center');
        }
    }

    function via_informacion(via){
        if (via == "Otra"){
            showElementByDisplay('via_alterna');
            showElementByDisplay('via_alterna_value');
        }
        else{
            hideElementByDisplay('via_alterna');
            hideElementByDisplay('via_alterna_value');
        }
    }
    
</script>
<script type="text/javascript">
    $(function(){
        $('#fechaControl').datepicker({
            dateFormat: 'dd/mm/yy',
            maxDate: new Date(),
            showOn: "button",
            buttonImage: "style/images/calendar.gif",
            buttonText: "calendario"
        }).attr('readonly', true);
    });

</script>


<center>
    <h2>Agregar Informe de Novedad</h2>
    <br>

    <div id="center">
        <!-- Fila de insertar -->
        <html:form action="/AgregarReporte" styleId="AgregarReporteForm" onsubmit="return sendForm('AgregarReporteForm', 'AgregarReporte','center');">
            <!-- Subtitulos -->
            <h2 id="sub1">Información General:</h2>
            <h2 id="sub2" style="display: none">Sitio de la Novedad:</h2>
            <h2 id="sub3" style="display: none">Información Adicional:</h2>
            <h2 id="sub4" style="display: none">Personas Involucradas:</h2>
            <br><html:errors property = "reporte_novedad_fallido"/>
            <table id="infoGeneralTable">
                <tr>
                    <td><font color="red">*&nbsp;</font>Novedad genérica asociada:</td>
                    <td><select id="novGenSelected" name ="novGenSel" onchange="setOptions(this.value);">
                            <script type="text/javascript">
                                $.getJSON("listaNovedadesGenericas.do",
                                function(data) {
                                    $('#novGenSelected').empty();
                                    $('#novGenSelected').append("<option value='seleccionar'>Seleccionar</option>");
                                    data.namesNG.sort(function(a,b){return ((a.novedad == b.novedad) ? 0 : ((a.novedad > b.novedad) ? 1 : -1 ))});
                                    $.each(data.namesNG, function(i,item){
                                        var string = "<option value='"+item.idNovedad+"'>"+item.novedad+"</option>";
                                        $('#novGenSelected').append(string)
                                    });
                                });
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <ul>
                            <li id="error_select_ng" style="display: none" >
                                <font color="red" ><p>Debe seleccionar una Novedad Genérica.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Novedad específica asociada:</td>
                    <td><select id="novEspSelected" name ="novEspSel">
                            <script type="text/javascript">
                                function setOptions(valor){
                                    $.getJSON("listaNovedadesEspecificas.do",{nombre: valor},
                                    function(data) {
                                        $('#novEspSelected').empty();
                                        $('#novEspSelected').append("<option value='seleccionar'>Seleccionar</option>");
                                        if(valor != 'seleccionar'){
                                            data.namesNE.sort(function(a,b){return ((a.novedadEsp == b.novedadEsp) ? 0 : ((a.novedadEsp > b.novedadEsp) ? 1 : -1 ))});
                                            $.each(data.namesNE, function(i,item){
                                                document.getElementById('novEspSelected').disabled = false;
                                                var string = "<option value='"+item.idNovedadEsp+"'>"+item.novedadEsp+"</option>";
                                                $('#novEspSelected').append(string);
                                            });
                                            if((document.getElementById('novEspSelected')).options.length == 0){
                                                $('#novEspSelected').empty();
                                                var string = "<option value='seleccionar'></option>";
                                                $('#novEspSelected').append(string);
                                                document.getElementById('novEspSelected').disabled = true;
                                            }
                                        }
                                    });
                                }
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <ul>
                            <li id="error_select_ne" style="display: none" >
                                <font color="red" ><p>Debe seleccionar una Novedad Específica.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Fecha del suceso:</td>
                    <td><html:text property="fecha_suceso" styleId="fechaControl" size="20"/></td>
                </tr>

                <tr>
                    <td>
                    </td>
                    <td>
                        <ul>
                            <li id="error_fecha_vacia"  style="display: none">
                                <font color="red" ><p>Debe ingresar una fecha.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Hora del suceso:</td>
                    <td><html:select property="hora_suceso">
                            <%  /* Llena el dropdown de las horas
                                         */
                                        for (int i = 0; i < 24; i++) {
                                            String valor = String.valueOf(i);
                                            if (i < 10) {
                                                valor = "0" + valor;
                                            }%>
                            <html:option value="<%= valor%>"><%= valor%></html:option>
                            <%}%>
                        </html:select>
                        :
                        <html:select property="minutos_suceso">
                            <%  /* Llena el dropdown de los minutos
                                         */
                                        for (int i = 0; i < 60; i++) {
                                            String valor = String.valueOf(i);
                                            if (i < 10) {
                                                valor = "0" + valor;
                                            }%>
                            <html:option value="<%= valor%>"><%= valor%></html:option>
                            <%}%>
                        </html:select>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Oficial que levanta el suceso:</td>
                    <td><select id="workerSelected" name ="agrega">
                            <script type="text/javascript">
                                $.getJSON("listaTrabajadoresDSI.do",
                                function(data) {
                                    $('#workerSelected').empty();
                                    $('#workerSelected').append("<option value='seleccionar'>Seleccionar</option>");
                                    data.namesTrabajadoresDSI.sort(function(a,b){return ((a.apellido == b.apellido) ? 0 : ((a.apellido > b.apellido) ? 1 : -1 ))});
                                    $.each(data.namesTrabajadoresDSI, function(i,item){
                                        var string = "<option value='"+item.cedula+"'>"+item.apellido+", "+item.nombre+" - "+item.cedula+"</option>";
                                        $('#workerSelected').append(string)
                                    });
                                });
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <ul>
                            <li id="error_oficial" style="display: none">
                                <font color="red"><p>Debe seleccionar un Oficial.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Vía de información:</td>
                    <td>
                        <html:select property="via" styleId="viaSelected" onchange="via_informacion(value)">
                            <html:option value="seleccionar">Seleccionar</html:option>
                            <html:option value="Email">Correo Electrónico</html:option>
                            <html:option value="Personal">Denuncia Personal</html:option>
                            <html:option value="Informante">Informante</html:option>
                            <html:option value="Memorando">Memorando</html:option>
                            <html:option value="Radio">Radio</html:option>
                            <html:option value="Telefónica">Telefónica</html:option>        
                            <html:option value="Otra">Otra</html:option>        
                        </html:select>
                </tr>
                <tr>
                    <td id="via_alterna" style="display: none" >Indique la vía de información:</td>
                    <td><input type="text" value="" id="via_alterna_value" name="via_alterna_value" size="25" style="display: none" onblur="via_informacion_alterna(value)" onchange="via_informacion_alterna(value)"/></td>
                </tr>
                <tr>
                    <td></td><td>
                        <ul>
                            <li id="error_via" style="display: none">
                                <font color="red" ><p>Debe especificar una vía de información.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td></td><td>
                        <ul>
                            <li id="error_via_alterna" style="display: none">
                                <font color="red" ><p>La vía de información alterna no puede ser vacia,<br> debe estar compuesta solo de letras y no debe empezar por espacios.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>

            <!-- Final Primera Parte Formulario -->

            <!-- Inicio Segunda Parte Formulario -->

            <table id="ubicacionTable" style="display: none">
                <tr>
                    <td><font color="red">*&nbsp;</font>Sede:</td>
                    <td><select id="sedeSelected" name ="sede" onchange="setEspacios(value);">
                            <script type="text/javascript">
                                $.getJSON("listaSedeAction.do",
                                function(data) {
                                    $('#sedeSelected').empty();
                                    $('#sedeSelected').append("<option value='seleccionar'>Seleccionar</option>");
                                    data.consultarSede.sort(function(a,b){return ((a.nombre == b.nombre) ? 0 : ((a.nombre > b.nombre) ? 1 : -1 ))});
                                    $.each(data.consultarSede, function(i,item){
                                        var string = "<option value='"+ item.nombre +"'>"+item.nombre+"</option>";
                                        $('#sedeSelected').append(string)
                                    });
                                });
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*&nbsp;</font>Ubicación del Suceso:</td>
                    <td><select id="espacioSelected" name ="ubicacion" onchange="checkEspacio(this.value,document.getElementById('sedeSelected').value);">
                            <script type="text/javascript">
                                function setEspacios(valor){
                                    $.getJSON("listaEspacios.do",{sede: valor},
                                    function(data) {
                                        $('#espacioSelected').empty();
                                        data.espacios.sort(function(a,b){return ((a.nombre == b.nombre) ? 0 : ((a.nombre > b.nombre) ? 1 : -1 ))});
                                        $.each(data.espacios, function(i,item){
                                            document.getElementById('espacioSelected').disabled = false;
                                            var string = "<option value='"+item.nombre+"'>"+item.nombre+"</option>";
                                            $('#espacioSelected').append(string);
                                        });
                                        if((document.getElementById('espacioSelected')).options.length == 0){
                                            var string = "<option value='seleccionar'></option>";
                                            $('#espacioSelected').append(string);
                                            document.getElementById('espacioSelected').disabled = true;
                                        }
                                    });
                                }
                            </script>
                            <option value="seleccionar">Seleccionar</option>
                        </select>
                    </td>
                </tr>
            </table>
            <tr>
                <td>
                    <ul>
                        <li  id="error_ubicacion" style="display: none">
                            <font color="red"><p>Debe indicar una ubicación valida.</p></font>
                        </li>
                    </ul>
                </td>
            </tr>
            <br>
            <h4 id="pisosSub" style="display: none">Pisos:</h4>
            <table id="pisosTable" style="display: none">
            </table>

            <!-- Final Segunda Parte Formulario -->

            <!-- Inicio Tercera Parte Formulario -->
            <div style="overflow:auto">
                <table cellpadding="0" cellspacing="0" border="0" id="peopleTable" style="display:none" class="sortable">
                    <br>
                    <thead>
                        <tr>
                            <th class="nosort">Nombre</th>
                            <th>Apellido</th>
                            <th>Cédula de Identidad</th>
                            <th>Teléfono</th>
                            <th>Email</th>
                            <th>Tipo</th>
                            <th>Nivel de Implicación</th>
                            <th>Agregar/Quitar<br>Implicado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="tr1">
                            <td><input type="text" id="n1" name="names[]" size="12"/></td>
                            <td><input type="text" id="a1" name="lNames[]" size="12"/></td>
                            <td nowrap="true"><select name="nacs[]">
                                    <option value="V">V</option>
                                    <option value="E">E</option>
                                </select>
                                -
                                <input type="text" id="c1" name="cedulas[]" size="10"/>
                            </td>
                            <td><input type="text" id="t1" name="telefonos[]" size="12"/></td>
                            <td><input type="text" id="mail1" name="emails[]" size="12"/></td>
                            <td><select id="tipo1" name="tipos[]">
                                    <option value="Academico">Académico</option>
                                    <option value="Estudiante">Estudiante</option>
                                    <option value="Externo">Externo</option>
                                    <option value="Obrero">Obrero</option></select>
                            </td>
                            <td nowrap="true">
                                <table><tr><td>Denunciante</td><td><input type="checkbox"  id="dens1" value="1"></td><td><input type="text" id="dens_val_1" style="display:none" name="dens[]" value=""></td></tr>
                                    <tr><td>Agraviado</td><td><input type="checkbox" id="agr1" value="1"></td><td><input type="text" id="agr_val_1" style="display:none" name="agr[]" value=""></td></tr>
                                    <tr><td>Indiciado</td><td><input type="checkbox" id="ind1" value="1"></td><td><input type="text" id="ind_val_1" style="display:none" name="ind[]" value=""></td></tr>
                                    <tr><td>Testigo</td><td><input type="checkbox" id="test1" value="1"></td><td><input type="text" id="test_val_1" style="display:none" name="test[]" value=""></td></tr>
                                </table>
                            </td>
                            <td id="td1"><input type="button" name="addFieldButton" id="addFieldButton1" value="+" onclick="nuevoCampo();"/><input type='button' style="display: none" name='removeFieldButton' id='removeFieldButton1'/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <table id="namesErrorsTable">
                <tr>
                    <td>
                        <ul>
                            <li  id="error_nombre_inv" style="display: none">
                                <font color="red"><p>El nombre sólo puede contener letras y no puede empezar con espacios.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul><li  id="error_apellido_inv" style="display: none">
                                <font color="red"><p>El apellido sólo puede contener letras y no puede empezar con espacios.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul><li id="error_cedula_inv" style="display: none">
                                <font color="red" ><p>La cédula sólo puede contener números.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li  id="error_telefono_inv" style="display: none">
                                <font color="red"><p>El teléfono sólo puede contener números y debe tener una longitud entre 7 y 15 números.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li  id="error_campos_vacios" style="display: none">
                                <font color="red"><p>Los campos nombre, apellido y cédula son obligatorios para agregar a un implicado.</p></font>
                            </li>
                        </ul>
                    </td>
                </tr>

            </table>
            <table id="fieldsTable" style="display: none">

                <!-- Final Tercera Parte Formulario -->

                <!-- Inicio Cuarta Parte Formulario -->

            </table>
            <table id="error_fieldsTable" style="display: none">
            </table>
            <br>
            <table id="descripcionTable" style="display: none">

                <tr>
                    <td><font color="red">*&nbsp;</font>Descripción:</td>
                    <td><textarea id="descripcion" size="30" cols="30" rows="4" name="descripcion"></textarea></td>
                </tr>
            </table>
            <li id="error_descripcion" style="display: none"><font color="red" ><p>Debe introducir una descripción del suceso.</p></font></li>
            <br>
            <font color="red"><p>NOTA: Los campos que tienen (*) son obligatorios.</p></font>
            <br>
            <table>
                <!-- Parte baja de la página -->
                <tr>
                    <td>
                        <input type="button" name="nextButton" id="nextButton" value="Continuar" onclick="basicosDone()"/>
                    </td>
                    <td>
                        <input type="button" name="addReporte" id="addReporte" value="Agregar"  style="display: none" onclick="validarCamposDesc();"/>
                    </td>
                    <td>
                        <input type="button" name="backButton" id="backButton" value="Atrás" onclick="novedadesInforme();"/>
                    </td>
                </tr>
            </table>
        </html:form>
    </div>
</center>

